<template>
	<view>
		
		<!-- 返回 -->
		<view class="backs">
			<view @click="backlast()">
				<image src="../../static/back1.png"></image>
			</view>
		</view>
		<view class="container">
			<TabBar  :tabIndex="tabindex" ></TabBar>
			<!-- 背景色区域 -->
			
			<view class="titleNview-background"  :style="'background: url('+url()+'/wximg/bjTop1.png'+'); background-size: 100%;'"  >
				<!-- 配送车辆-->
				<view class="text-box">
					<text>配送车牌号码：{{name}}</text>
				</view>
			</view>
			<!-- 待配送商户已配送商户区域 -->
			<view class="model">
				<view class="onlyOne">
					<view class="modelrt">
						<text>包裹</text>
						<text class="psnums"><text class="psnum">{{baoguonum}}</text>个</text>
					</view>
				</view>
				<text class="modeline"></text>
				<view class="onlyOne">
					<view class="modelrt">
						<text>香烟</text>
						<text class="psnums"><text class="psnum">{{yannum}}</text>条</text>
					</view>
				</view>
				<text class="modeline"></text>
				<view class="onlyOne">
					<view class="modelrt">
						<text>已验签</text>
						<text class="psnums"><text class="psnum">{{yanqiannum}}</text>条</text>
					</view>
				</view>
				<text class="modeline"></text>
				<view class="onlyOne">
					<view class="modelrt">
						<text>异常</text>
						<text class="psnums"><text class="psnum" style="color: #f63b3b;">{{yichangnum}}</text>条</text>
					</view>
				</view>
			</view>

			<view class="wrapper" :style="{minHeight: heightContent+'px'}">
				<view class="tableBox">
					<view  v-for="(item,i) in contents"  class="tableBox">
						<view class="tabletitle">配送单号</view>
						<view class="table">
							<view class="bgName"> 
								<text>包裹{{i+1}}</text>
								<text>包裹编码：<text>{{item.packageCode}}</text></text>
							</view>	
							<wyb-table 
							:key="key"
							show-vert-border="false" 
							header-bg-color="#fff" 
							first-col-bg-color="#fff" 
							content-bg-color="#fff"
							height='182px'
							content-ft-color="#333333"  
							header-weight="true" 
							border-color="#ffffff"
							ref="table" 
							:headers="headers" 
							:contents="item.deliveryPackageRowList" 
							width="100%"
							:show-vert-border="vertborder"
							:loading="loading"
							:url-col="urlCol"
							@onCheck="onCheck"
							@onCellClick="onCellClick"
							@onButtonClick="onButtonClick"
							  />			
						</view>
						
					</view>	
					
					<button @click.stop="confirmCustom()" class="Confirm-delivery" hover-class='Confirm-delivery-hover' v-show="isShow"
							type="primary">确认配送结果</button>
				</view>
				
			</view>
			<!-- 查看异常图片 -->
			<popupConfirm ref="tableConfirm">
				<view class="popup-info">
					<navigator type="default" @click="close" class="close">
						<image :src="url()+'/wximg/close.png'"></image>
					</navigator>
					<view class="popuptitle">异常图片</view>
					<view class="imgWra">
						<image class="up-check" mode="widthFix" :src="imgurl"></image>
					</view>
				</view>
			</popupConfirm>
			<!-- 确定异常图片 -->
			<popupfour ref="xmConfirm">
				<view class="popup-info">
					<navigator type="default" @click="close" class="close">
						<image :src="url()+'/wximg/close.png'"></image>
					</navigator>
					<view class="imgWra">
						<image class="up-check" mode="widthFix" :src="url()+'/wximg/confirm.jpg'"></image>
					</view>
					<view class="cetext">是否结束本次验签并确认验签结果？</view>
					<view class="confirm-text">
						<button class="confirm-button-text" type="primary" @click="sureEmpower">是</button>
						<view class="confirm-line"></view>
						<button class="confirm-button-text" type="primary" @click="cancelEmpower">否</button>
					</view>
				</view>
			</popupfour>
		</view>
	</view>
</template>

<script>
	// 表格
	import util from "@/common/util.js";
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import service from '../../service.js';
	import {selectShopPackage} from '@/api/request.js';
	import {beginDelivery} from '@/api/request.js';
	import TabBar from '@/components/tabBar.vue'
	import url from '@/api/url.js';
	let user=service.getUsers().user;
	export default {
		components: {
			// 表格
			wybTable
		},
		data() {
			const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
			const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			return {
				url:url,
				//获取高度
				heightContent:'',
				// 配送车牌号码
				name: '',
				// 包裹编号
				packageCode: '',
				shopid:'',
				shop:'',
				isShow:false,
				tabindex:2,
				baoguonum:'',
				yannum:'',
				yanqiannum:'',
				yichangnum:'',
				imgurl:url()+'/wximg/confirm.jpg',
				//表格
				key: 0,
				headers2:[],
				contents2:[],
				loading:true,
				vertborder:false, //金融竖向条,但是不能去除头部
				// 表格数据
				headers: [{
					label: '品名',
					key: 'commodityName',
					width:350
				}, {
					label: '总数',
					key: 'numtext',
					width:290
				}
				],
				contents: [],
				urlCol: [{
					type: 'route',
					key: '1'
				}, {
					type: 'http',
					key: 'url'
				},
				{
					type: 'button',
					key: 'look'
				}]
			};
		},
		onLoad(options) {
			user=service.getUsers().user;
			try{
				let json = JSON.parse(decodeURIComponent(options.data));
				let date = new Date();
				if(util.dateFtt(date,'yyyy-MM-dd HH:mm:ss') < json.enTime){
					this.shop = options.data
					if(json.id != undefined){
						this.shopid = json.id
						this.selectShopPackage();
					}else{
						uni.showModal({
							title: '提示',
							content: '此二维码与任务不符',
							showCancel: false
						})
					}
				}else{
					uni.switchTab({
						url:'/pages/index/index'
					})
					uni.showModal({
						title: '提示',
						content: '此二维码已过期',
						showCancel: false
					})
				}
			}catch (e){
				uni.switchTab({
					url:'/pages/index/index'
				})
				uni.showModal({
					title: '提示',
					content: '请扫描正确二维码',
					showCancel: false
				})
			}
			
			//表格加载动画
		
		},
		onReady(){
			let that = this
			uni.getSystemInfo({
				success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
				// res - 各种参数
		　　    let info = uni.createSelectorQuery().select(".wrapper");// 获取某个元素
		　　　  info.boundingClientRect(function(data) { //data - 各种参数
					 let view  = res.windowHeight - data.top
					 that.heightContent = view
	　　        }).exec()
				}
			});		
		},
		methods: {
			backlast(){
				uni.switchTab({
					url:'/pages/index/index'
				})
				
			},
			confirmCustom(){
				let xmConfirm = this.$refs.xmConfirm
				xmConfirm.open()
			},
			//表格
			onCellClick(e) {

			},
			onCheck(e) {

			},
			// 关闭弹窗
			close(){
				let tableConfirm = this.$refs.tableConfirm
				let xmConfirm = this.$refs.xmConfirm
				tableConfirm.onTap()
				
				xmConfirm.onTap()
			},
			// 取消授权
			onButtonClick(e) {
				if(e.lineData.qePrictureUrl!=""&&e.lineData.qePrictureUrl!=undefined){
					this.imgurl=e.lineData.qePrictureUrl
				}else{
					this.imgurl=url()+'/wximg/confirm.jpg';
				}
			   let tableConfirm = this.$refs.tableConfirm
			   tableConfirm.open()
			/* 	this.event = this.jsonShowFn(e)
				this.$refs.modal.showModal() */
			},
			// 确认验签
			sureEmpower(){
				user=service.getUsers().user;
				let uderis = user.id;
			
				let  param={
					userid:uderis,
					shopid:this.shopid,
					type:'2'
				};
				
				beginDelivery(param).then(res => {
					if (res.code == 200) {
						uni.showModal({
							title: '成功',
							content: '已确认包裹签收',
							showCancel: false
						})
						uni.navigateTo({
						    url: '/pages/distribution/distribution',
						});
						let json = JSON.parse(decodeURIComponent(this.shop));
						let pasm={
							id:json.userid,
							text:this.shop
						}
						this.$store.commit("send",pasm)
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showModal({
						title: '请重新扫码',
						content: '验签失败',
						showCancel: false
					})
				})
				let xmConfirm = this.$refs.xmConfirm
				xmConfirm.onTap()
			},
			cancelEmpower(){
				let xmConfirm = this.$refs.xmConfirm
				xmConfirm.onTap()
			},
			selectShopPackage(){//配送人员查询
				let  param={
					shopid:this.shopid,
					userid:user.id,
					type:'2'
				};
				let thsi=this;
				selectShopPackage(param).then(res => {
					if (res.code == 200) {
						if(res.map.shopPackage.length>0){
							let ynum = 0
							let bgnum = 0
							let yanqian = 0
							let yichang = 0
							this.packageNumber=res.map.shopPackage.length;//渲染包裹个数
							res.map.shopPackage.forEach(function (item){
								bgnum++
								item.deliveryPackageRowList.forEach(function(items){
									if(parseInt(items.commodityType)==1){//判断类型
										items.numtext=items.num+"条"
										ynum+=parseInt(items.num)
									}else{
										items.numtext=items.num+"箱"
										ynum+=parseInt(items.num)*10
									}
									if(parseInt(items.commodityStatus)==3){
										thsi.abnormalNumber=thsi.abnormalNumber+1
										items.listState=true;
										items.listColor=[{"element":0,"color":"#ef0000"},{"element":1,"color":"#ef0000"},{"element":2,"color":"#ef0000"},{"element":3,"color":"#ef0000"}]
									    items.commodityStatusName="异常"
										items.look='查看';
										if(parseInt(items.commodityType)==1){//判断类型
											yichang+=parseInt(items.num)
										}else{
											yichang+=parseInt(items.num)*10
										}
										
									}else if(parseInt(items.commodityStatus)==2){
										thsi.VerifiedNubmer=thsi.VerifiedNubmer+1
										items.commodityStatusName="验签"
										if(parseInt(items.commodityType)==1){//判断类型
											yanqian+=parseInt(items.num)
										}else{
											yanqian+=parseInt(items.num)*10
										}
									}
									
									
								})
								thsi.contents.push(item);
							});
							this.yannum = ynum  + ' '
							this.baoguonum = bgnum  + ' '
							this.yanqiannum = yanqian  + ' '
							this.yichangnum = yichang  + ' '
							this.isShow = true
							this.wait(1000).then(() => {
								this.headers2 = this.headers.slice()
								this.contents2 = this.contents.slice()
								this.loading = false
							})
						}else{
							uni.showModal({
								title: '提示',
								content: '暂无此商家配送信息',
								showCancel: false
							})
						}
						
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showModal({
						title: '警告',
						content: '失败',
						showCancel: false
					})
				})
			},
			wait(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			}
		}

	}
</script>

<style scoped>
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}

	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
		position: relative;
	}

	.wrapper {
		position: relative;
		width: 91%;
		margin: 0 auto;
		z-index: 2;
		border-top-left-radius:27upx;
		border-top-right-radius:27upx;
		background-color: #fff;
	}

	/*配送车牌号*/
	.text-box {
		position: absolute;
		color: #fff;
		bottom: 150upx;
		left: 5%;
		width: 91%;
		z-index: 2;
		font-size: 32upx;
	}


	/* 待配送 已配送商户 */
	.model {
		width: 75%;
		margin: 0 auto;
		margin-top: -129upx;
		padding: 35upx 8%;
		border-radius: 27upx;
		background-color: #fff;
		z-index: 2;
		box-shadow: 0 5px 5px rgba(227, 227, 227, .5);
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.onlyOne {
		display: flex;
		align-items: center;
	}

	.modeline {
		width: 1px;
		height: 70upx;
		background-color: #eeeeee;
	}

	.modelrt {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #888888;
		white-space: nowrap;
		font-size: 21.84upx;
		text-align: center;
	}

	.psnums {
		color: #000;
		font-size: 28.08upx;
		margin-top: 5upx;
	}

	.psnum {
		color: #f69c3c;
		font-size: 47.32upx;
		font-weight: bold;
		margin-right: 10upx;
	}

	/* 表格 */
	.tableBox {
		width: 100%;
		padding-bottom: 40upx;
		margin-top: 44upx;
	}

	.tabletitle {
		border-top-left-radius: 27upx;
		border-top-right-radius: 27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size: 32upx;
	}

	.table {
		width: 96%;
		margin: 0 auto;
		/* 下方的灰色分割线 */
		border-bottom: solid 14upx #eee;
		padding-bottom: 40upx;
		margin-bottom: 40upx;
	}
    /*包裹ID及包裹编号*/
	.bgName {
		padding:20upx 0; 
		line-height: 40upx;
		display: flex; 
		justify-content: space-between;
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
		border-bottom: solid 1px #eee;
	}
	/* 确认配送结果 btn */
	.Confirm-delivery {
		background-color: #ffc562;
	}

	.Confirm-delivery-hover {
		background-color: #db760d;
	}

	.Confirm-delivery,
	.Confirm-delivery-hover {
		border-radius: 200upx;
		margin: 80upx auto;
		box-shadow: 0 2px 5px #e3e3e3;
	}
/* 是否确认取消弹窗 */
	.popup-info {
		position: fixed;
		min-width:80%;
		max-width:80%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30upx;
		border-radius:27upx;
		background-color: #fff;
		z-index: 9999;
	}
	 .popuptitle {
		border-top-left-radius: 27upx;
		border-top-right-radius:27upx;
		background-color: #007457;
		height: 98upx;
		width: 100%;
		text-align: center;
		line-height: 98upx;
		color: #fff;
		font-size:36upx;
		letter-spacing: 2px;
	}
	.cetext {
		line-height: 50upx;
		margin-bottom: 30upx;
		font-size: 32upx;
		text-align: center;
	}
	.close {
		position: absolute;
		top:-75upx;
		left:10upx;
	}
	.close image {
		width:37upx;
		height:37upx;
	}
	.imgWra {
		width: 80%; 
		margin:80upx auto;
	}
	
	.up-check {
		width:500upx ;
		height: 500upx;
	}
	.confirm-text {
		width:80%;
		margin: 0 auto 30upx;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: solid 1px #999;
	}
	.confirm-line {
		width: 1px;
		height:60upx ;
		background-color: #999;
	}
	.confirm-button-text {
		width:50%;
		background:transparent;
		font-size: 28upx;
		line-height:100upx;
		color: #333;
	}
	.confirm-button-text::after {
		border: none;
	}
	
	/* 弹窗按钮 */
	.btnPat {
		width: 100%;
		display: flex;
		flex:1;
		flex-direction:row;
	}
	.btn {
		width: 90%;
		background-color: #ffc562;
		border-radius: 200upx;
		margin:40upx auto;
		box-shadow: 0 2px 5px #e3e3e3;
		color: #fff;
	}
	.btn::after{
		border: none;
	}
</style>

